<template>
  <tc-flex :class="direction">
    <tc-flex class="item" v-for="item in icons" :key="item.tag" @click="onClick(item.tag)">
      <tc-icon :style="{ color: item.color }" v-show="item.icon != ''" :icon="item.icon"></tc-icon>
      <span class="name" :style="{ color: item.color }" v-show="item.name != ''">{{ item.name }}</span>
    </tc-flex>
  </tc-flex>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import TcIcon from '@/controls/TcIcon.vue'

  @Component({
    components: {
      TcIcon
    }
  })
  export default class TcHeader extends Vue{
    @Prop()
    direction: 'left' | 'right'

    @Prop()
    icons: Icons[]

    onClick (tag) {
      this.$emit('click', tag)
    }
  }
</script>

<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.theme(){
  .left{
    position: absolute;
    top: 0;
    left: 0;
    height: @tc-header-height;

    .item{
      margin-left: @separation;
      padding-left: @separation;
    }
  }

  .right{
    position: absolute;
    top: 0;
    right: 0;
    height: @tc-header-height;

    .item{
      margin-right: @separation;
      padding-right: @separation;
    }
  }

  .name{
    font-size: @tc-icons-name-font-size;
    margin-left: @tc-icons-name-separation;
  }

  .icon{
    width: @tc-icons-size;
    height: @tc-icons-size;
  }
}
.theme-default{
  .theme()
}
.theme-dark{
  .theme()
}
</style>
